import { AfterViewChecked, AfterViewInit, Component, ViewChild } from '@angular/core';

import { LoggerService, ComponentBase } from '../share';

//////////////////
@Component({
    selector: 'my-child-view',
    template: '<input [(ngModel)]="hero">'
})
export class ChildViewComponent extends ComponentBase {
    hero = 'Magneta';
}

//////////////////////
@Component({
    selector: 'after-view',
    template: `
    <div>-- child view begins --</div>
      <my-child-view></my-child-view>
    <div>-- child view ends --</div>`
    + `
    <p *ngIf="comment" class="comment">
      {{comment}}
    </p>
  `,
//   changeDetection :  
})
export class AfterViewComponent extends ComponentBase implements AfterViewChecked, AfterViewInit {
    private prevHero = '';

    // Query for a VIEW child of type `ChildViewComponent`
    @ViewChild(ChildViewComponent) viewChild: ChildViewComponent;

    constructor(private logger: LoggerService) {
        super();
        this.logIt('AfterView constructor');
    }

    ngAfterViewInit() {
        super.ngAfterViewInit();

        // viewChild is set after the view has been initialized
        this.logIt('AfterViewInit');
        this.doSomething();
    }

    ngAfterViewChecked() {
        super.ngAfterViewChecked();

        // viewChild is updated after the view has been checked
        if (this.prevHero === this.viewChild.hero) {
            this.logIt('AfterViewChecked (no change)');
        } else {
            this.prevHero = this.viewChild.hero;
            this.logIt('AfterViewChecked');
            // this.doSomething();
        }
    }

    comment = '';

    // This surrogate for real business logic sets the `comment`
    private doSomething() {
        let c = this.viewChild.hero.length > 10 ? `That's a long name` : '';
        if (c !== this.comment) {
            // Wait a tick because the component's view has already been checked
            this.comment = c;
            // this.logger.tick_then(() => this.comment = c);
        }
    }

    private logIt(method: string) {
        let child = this.viewChild;
        let message = `${method}: ${child ? child.hero : 'no'} child view`;
        this.logger.log(message);
    }
    // ...
}

//////////////
@Component({
    selector: 'after-view-parent',
    template: `
  <div class="parent">
    <h2>AfterView</h2>

    <after-view  *ngIf="show"></after-view>

    <h4>-- AfterView Logs --</h4>
    <p><button (click)="reset()">Reset</button></p>
    <div *ngFor="let msg of logs">{{msg}}</div>
  </div>
  `,
    styles: ['.parent {background: burlywood}'],
    providers: [LoggerService]
})
export class AfterViewParentComponent extends ComponentBase {
    logs: string[];
    show = true;

    constructor(private logger: LoggerService) {
        super();
        this.logs = logger.logs;
    }

    reset() {
        this.logs.length = 0;
        // quickly remove and reload AfterViewComponent which recreates it
        this.show = false;
        this.logger.tick_then(() => this.show = true);
    }
}


/*
     Remark:
         1. 跟afterContent类似。AfterView关心的是ViewChildren。
         2. PS: DoCheck、afterContentCheck、afterViewCheck里面的逻辑应尽量简单，因为ng的机制会频繁调用这几个hook。
         3. Angular会在每次创建了组件的子视图后调用它们。
            --A01 AfterViews
            -A0 AfterViews
            A AfterViews
         4. 遵循单向数据流规则,ng禁止在一个视图已经被组合好之后再更新视图。
            AfterViews都是在组件的视图已经被组合好之后触发的。
            --> Error: 'Expression has changed after it was checked.'
*/
